<template>
    <div id="order_chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'orderBarLineChart',
    data() {
        return {
            chart: null,
        }
    },
    mounted() {
        this.initChart();
        window.addEventListener('resize', () => {
            this.chart.resize();
        });
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById('order_chart'));
            this.updateChart();
        },
        updateChart() {
            if (!this.chart) return;
            const option = {
                title: {
                    text: '收入来源统计',
                    textStyle: {
                        color: '#02C2FF',
                        fontSize: 16,
                    },
                    left: 10,
                    top: 10
                },
                grid: {
                    left: "3%",
                    right: "3%",
                    top: "15%",
                    bottom: 0,
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "none",
                    },
                    formatter: function (params) {
                        return (
                            params[0].name +
                            "<br/>" +
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                            params[0].seriesName +
                            " : " +
                            Number(
                                (params[0].value.toFixed(4) / 10000).toFixed(2)
                            ).toLocaleString() +
                            " 万元<br/>"
                        );
                    },
                },
                xAxis: {
                    show: false,
                    type: "value",
                },
                yAxis: [
                    {
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        data: ["陪玩", "陪聊", "发单", "团购", "其他"],
                    },
                    {
                        type: "category",
                        inverse: true,
                        axisTick: "none",
                        axisLine: "none",
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: "12",
                            },
                            formatter: function (value) {
                                if (value >= 10000) {
                                    return (value / 10000).toLocaleString() + "万";
                                } else {
                                    return value.toLocaleString();
                                }
                            },
                        },
                        data: [50000000, 22000000, 10000000, 5000000, 100],
                    },
                ],
                series: [
                    {
                        name: "金额",
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: "rgb(57,89,255,1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(46,200,207,1)",
                                    },
                                ]),
                            },
                        },
                        barWidth: 20,
                        data: [50000000, 22000000, 10000000, 5000000, 100],
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barWidth: 20,
                        barGap: "-100%",
                        data: [50000000, 50000000, 50000000, 50000000, 100],
                        itemStyle: {
                            normal: {
                                color: "rgba(24,31,68,1)",
                                barBorderRadius: 30,
                            },
                        },
                    },
                ],
            };
            this.chart.setOption(option);
        },
    },
}


</script>

<style>
#order_chart {
    width: 100%;
    height: 100%;
}
</style>
